<template>
  <div>
    <div>
      <span>num:{{ num }} <button @click="increment">num+1</button></span>
    </div>
    <div>
      <span>age:{{ age }} <button @click="updateAge">age+1</button></span>
    </div>
  </div>
</template>
<!-- 
  组合式API监听的情况如下
  1、监听单个ref变量
 -->
<script lang='ts' setup>
  import {ref,watch} from 'vue'
  let num=ref<number>(0)
  const increment=()=>num.value++
  let age=ref<number>(18)
  const updateAge=()=>age.value++
  //监听单个ref
  // watch(num,(newval,oldval)=>{
  //   console.log(newval,oldval);
  // },{immediate:true})
  //监听多个ref
  watch([num,age],(newval,oldval)=>{
    console.log(newval,oldval);
  },{immediate:true})
</script>

<style lang='scss' scoped>
</style>